import React, {
    Component,
} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Platform,
    Dimensions,
    TouchableOpacity,
    Alert,
    FlatList,
    TextInput,
    Linking,
    Image,
    DeviceEventEmitter,
    ScrollView
} from 'react-native';

import moment from 'moment';
import HttpUtils from '../../utils/HttpUtils';
import HttpUrls from '../../utils/HttpUrls';
import AndroidModule from "../../utils/AndroidConnent";
import { ToastToUser } from "../../utils/CustomToast";
import Constant from '../../utils/Constant'
import NoData from '../../utils/NoData'
import Loading from "../../utils/Loading";
import { getImgUrl } from '../../utils/ComFunction'
import Header from "../../components/header";
import Picker from 'react-native-picker'
import ImageCropPicker from 'react-native-image-crop-picker';
import Upload from '../../components/upload/Upload'
import BigImageContainer from '../../components/Tool/BigImageContainer'

const screenW = Dimensions.get('window').width;

let initialPage
let navigation
/**
 * 确认收款页面
 */
export default class ConfirmReceivePayPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            payEvidence: '',
            payType: '',
            paymentMethod: '',//1:电汇， 2:支付宝， 3:微信)
            from: this.props.route.params.from,//1 预付款 2尾款
            orderNo: this.props.route.params.orderNo,
            confirmReceivePay: this.props.route.params.confirmReceivePay,//是否是确认收款
            showBigImageContainer:false,
            time:''
        }
    }

    componentDidMount() {
        if(this.state.from == '3'){
            this.getPaymentVoucherByAfterSalesNo()
        }else{
            this.getPaymentVoucherByOrderNo()
        }
        
    }

    render() {
        navigation = this.props.navigation;
        return (
            <View style={styles.container}>
                <Header navigation={navigation} hideSepLine={true} Title={'收款凭证'} ></Header>

                <View style={styles.uploadContain}>
                    <View style={styles.orderInfoItemContain}>
                        <Text style={styles.itemTitleText}>订单编号</Text>
                        <Text style={styles.itemText}>{this.state.orderNo}</Text>
                    </View>
                    <View style={styles.orderInfoItemContain}>
                        <Text style={styles.itemTitleText}>提交时间</Text>
                        <Text style={styles.itemText}>{this.state.time}</Text>
                    </View>
                    <View style={styles.orderInfoItemContain}>
                        <Text style={styles.itemTitleText}>支付方式</Text>
                        <Text style={styles.itemText}>{this.state.payType}</Text>
                    </View>
                </View>


                <View style={[styles.uploadContain,{marginTop:0}]}>
                    <Text style={styles.uploadTipTitleText}>支付凭证</Text>

                    <TouchableOpacity style={{ width: 85 }}
                        onPress={() => { 
                            this.setState({
                                showBigImageContainer: true
                            })
                         }}>
                        <Image style={styles.uploadImg} source={{ uri: getImgUrl(this.state.payEvidence) }} />

                        
                    </TouchableOpacity>

                    <View style={{flexDirection:'row',alignItems:'center',marginTop:10,justifyContent:'flex-end'}}>
                         <TouchableOpacity
                            style={styles.saveBtn}
                            onPress={() => { 
                                AndroidModule.downloadPictures({ imgList: [this.state.payEvidence] })
                             }}>
                            <Text style={styles.itemText}>保存凭证</Text>
                         </TouchableOpacity>
                    </View>

                </View>

                {this.state.confirmReceivePay ?
                    <View style={styles.bottomContain}>
                        <TouchableOpacity
                            style={styles.bottomButton}
                            onPress={() => {
                                this.submitPayInfo()
                            }}>
                            <Text style={styles.bottomButtonText}>确认收款</Text>
                        </TouchableOpacity>
                    </View>
                    : null
                }


                <Loading onRef={(ref) => (this.Loading = ref)} loadingText={'提交中...'} />

                {
                    this.state.showBigImageContainer ?
                        <BigImageContainer
                            idx={0}
                            images={[{url:getImgUrl(this.state.payEvidence)}]}
                            closeHandler={(index) => {
                                this.setState({
                                    
                                    showBigImageContainer: false
                                })
                            }}
                        />
                        :
                        null
                }

            </View>
        )
    }


    submitPayInfo() {
        if(this.Loading ){
            this.Loading.show();
        }
        if (this.state.from == 1) {
            this.confirmAdvancePaymentReceipt();
        } else if (this.state.from == 2) {
            this.confirmTailPaymentReceipt();

        }else if(this.state.from == 3){
            this.afterSaleUploadReceipt()
        }
    }



    /**
     * 根据订单编号获取回执信息
     */
    getPaymentVoucherByOrderNo() {
        let param = {
            orderNo: this.state.orderNo,
        }

        HttpUtils.getRequest(HttpUrls.getPaymentVoucherByOrderNo, param)
            .then((result) => {
                if (result.code == 0) {
                    let data = result.data
                    if (data) {
                        data.map((item,index) => {
                            if(item.paymentType == 1 && this.state.from == 1){
                                this.setState({
                                    payType: this.getPayType(item.paymentMethod),
                                    payEvidence: item.paymentVoucher,
                                    time: item.createTime
                                })
                            }else if(item.paymentType == 2 && this.state.from == 2){
                                this.setState({
                                    payType: this.getPayType(item.paymentMethod),
                                    payEvidence: item.paymentVoucher,
                                    time: item.createTime
                                })
                            }
                        })
                    }
                } else {
                    ToastToUser(result.msg + '')
                }
            })
            .catch((error) => {

            })

    }

    getPaymentVoucherByAfterSalesNo() {
        let param = {
            afterSalesNo: this.state.orderNo,
        }

        HttpUtils.getRequest(HttpUrls.getPaymentVoucherByAfterSalesNo, param)
            .then((result) => {
                if (result.code == 0) {
                    let data = result.data
                    if (data) {
                        data.map((item,index) => {
                            if(item.paymentType == 1 && this.state.from == 1){
                                this.setState({
                                    payType: this.getPayType(item.paymentMethod),
                                    payEvidence: item.paymentVoucher,
                                    time: item.createTime
                                })
                            }else if(item.paymentType == 2 && this.state.from == 2){
                                this.setState({
                                    payType: this.getPayType(item.paymentMethod),
                                    payEvidence: item.paymentVoucher,
                                    time: item.createTime
                                })
                            }else if(item.paymentType == 3 && this.state.from == 3){
                                this.setState({
                                    payType: this.getPayType(item.paymentMethod),
                                    payEvidence: item.paymentVoucher,
                                    time: item.createTime
                                })
                            }
                        })
                    }
                } else {
                    ToastToUser(result.msg + '')
                }
            })
            .catch((error) => {

            })

    }

    getPayType(paymentMethod){
        if(paymentMethod == 1){
            return '电汇'
        }else if(paymentMethod == 2){
            return '支付宝'
        }else if(paymentMethod == 3){
            return '微信'
        }
    }

    /**
    * 卖家确认70%预付款
    */
    confirmAdvancePaymentReceipt() {
        let param = {
            orderNo: this.state.orderNo,

        }

        HttpUtils.getRequest(HttpUrls.confirmAdvancePaymentReceipt, param)
            .then((result) => {
                if(this.Loading ){
                    this.Loading.hide();
                }
                if (result.code == 0) {

                    ToastToUser('确认预付款成功')
                    if (this.props.route.params && this.props.route.params.completion) {
                        setTimeout(() => {
                            navigation.goBack()
                            this.props.route.params.completion()
                        }, 500);
                    }

                } else {
                    ToastToUser(result.msg + '')
                }
            })
            .catch((error) => {

            });
    }

    /**
     * 卖家确认30%尾款付款
     */
    confirmTailPaymentReceipt() {
        let param = {
            orderNo: this.state.orderNo,

        }

        HttpUtils.getRequest(HttpUrls.confirmTailPaymentReceipt, param)
            .then((result) => {
                if(this.Loading ){
                    this.Loading.hide();
                }
                if (result.code == 0) {

                    ToastToUser('确认尾款成功')
                    if (this.props.route.params && this.props.route.params.completion) {
                        setTimeout(() => {
                            navigation.goBack()
                            this.props.route.params.completion()
                        }, 300);
                    }
                } else {
                    ToastToUser(result.msg + '')
                }
                l
            })
            .catch((error) => {

            });
    }

    afterSaleUploadReceipt(){
        let param = {
            afterSalesNo: this.state.orderNo,

        }

        HttpUtils.getRequest(HttpUrls.afterSaleConfirmReceipt, param)
            .then((result) => {
                if(this.Loading ){
                    this.Loading.hide();
                }
                if (result.code == 0) {

                    ToastToUser('确认售后款成功')
                    if (this.props.route.params && this.props.route.params.completion) {
                        setTimeout(() => {
                            navigation.goBack()
                            this.props.route.params.completion()
                        }, 300);
                    }
                } else {
                    ToastToUser(result.msg + '')
                }
                l
            })
            .catch((error) => {

            });
    }


}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F9F9F9',
    },

    arrowImg: {
        width: 16,
        height: 16
    },

    uploadContain: {
        marginLeft: 16,
        marginRight: 16,
        marginTop: 16,
        marginBottom: 16,
        backgroundColor: '#fff',
        borderRadius: 4,
        padding: 16
    },

    uploadTipTitleText: {
        fontSize: 16,
        color: '#222222',
        fontWeight: '500'
    },

    uploadImg: {
        width: 75,
        height: 75,
        marginTop: 16,

        marginRight: 16,
        borderRadius: 4
    },

    payTypeContain: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        backgroundColor: '#fff',
        marginLeft: 16,
        marginRight: 16,
        height: 46,
        borderRadius: 4,
        paddingHorizontal: 16
    },
    typeTitle: {
        fontSize: 14,
        color: '#333333',
        fontWeight: '500'
    },
    typeText: {
        fontSize: 14,
        color: '#999999',

    },

    bottomContain: {
        position: 'absolute',
        bottom: 0,
        left: 0,
        width: '100%',
        height: 100,
        flexDirection: 'row',

        backgroundColor: '#fff',
    },
    bottomButton: {
        margin: 15,
        height: 46,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#FFE000',
        flex: 1,
        borderRadius: 46
    },
    bottomButtonText: {
        fontSize: 16,
        color: '#333',
        fontWeight: '500'
    },

    orderInfoItemContain:{
        flexDirection:'row',
        alignItems:'center',
        
        height:46,
       
    },

    itemTitleText: {
        fontSize: 14,
        color: '#333333',
        width:88,
        
    },
    itemText: {
        fontSize: 14,
        color: '#333333',
       
    },
    saveBtn:{
        width:88,
        height:32,
        backgroundColor:'#FFE000',
        borderRadius:32,
        justifyContent:'center',
        alignItems:'center'
    }

})